import React from 'react'
import { changeNav ,getProduct,tenantBind} from '../../actions'
import { connect } from 'react-redux'
import { createForm } from 'rc-form'
import { List,InputItem,Picker,Button,Toast,WhiteSpace } from 'antd-mobile'
import styles from './../tenant.less'
import CSSModules from 'react-css-modules'
const Item = List.Item;

@CSSModules(styles, { allowMultiple: false })
class Bind extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
            product:[{value:-1,label:"请选择"}],
            activeProduct:[]
        }


    }
	componentDidMount(){
	    this.props.tochangeNav({title:"绑定已有产品/业务"});
	    console.log(this.props);
        this.props.getProduct();
	}
    componentWillReceiveProps( nextProps ){
		console.log(nextProps);
		this.setState({
			product:[...this.state.product,...this.productPicker(nextProps.products)]
		})
    }
    // 整理产品数据成picker对应类型
	productPicker(nextproduct){
        let arr = [],pickerarr =[];
        nextproduct.forEach((v) => {
            let val = v.productList;
            arr = [...arr,...val];
        })
        arr.forEach((v) => {
            let obj = {value:v.id,label:v.text};
            pickerarr.push(obj)
		})
		return pickerarr
	}
	render(){
        const { getFieldProps } = this.props.form
		return(
			<div>
				<List renderHeader={() => ''} className="my-list">
					<Picker

						data={[this.state.product]}
						title="选择产品"
						cascade={false}
						cols = '1'
						value = {this.state.activeProduct}
						onChange={
                            v => {
                                // this.testy.next()
                                this.setState({ activeProduct:v} )
                            }
                        }
					>
						<Item styleName="am-picker" arrow="down" onClick={ () => {
                            //this.props.getCity( this.props.servicerInfo.province )
                        } }>
							选择产品
						</Item>
					</Picker>
			    </List>
				<List renderHeader={() => <div style={{color:'#999999',fontSize:'0.26rem',lineHeight:'0.38rem'}}>请填写以下信息以完成业务绑定，绑定后可使用统一帐号登录所有系统</div>}>
				<InputItem
					  styleName="am-list"
                      {...getFieldProps('groupCode',{ rules: [{required: true}] })}
		            clear
		            placeholder="必填"
		            autoFocus
		          >集团号</InputItem>
		          <InputItem
					  styleName="am-list"
                      {...getFieldProps('username',{ rules: [{required: true}] })}
		            clear
		            placeholder="必填"
		            autoFocus
		          >用户名</InputItem>
		          <InputItem
					  styleName="am-list"
                      {...getFieldProps('password',{ rules: [{required: true}] })}
		            clear
		            placeholder="必填"
		            autoFocus
		            type="password"
		          >密码</InputItem>

		        </List>
				<WhiteSpace style={{background:'#f5f5f9'}} />
				<WhiteSpace style={{background:'#f5f5f9'}} />
				<Button key="1" type="primary"  onClick={
                () => {
                    this.props.form.validateFields(( error,value )=>{
                        if( error ){
                            Toast.info('请填写必填项')
                            return
                        }
                        this.props.tenantBind({ groupCode:value.groupCode
                            ,username:value.username,password:value.password,productCode:this.state.activeProduct[0]
                            , sGroupCode:'',servicerCode:''})
                    })
                } }>开通</Button>
			</div>
		)
	}

}

const mapStateToProps = ( state ) => ({
    products:state.products
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
    getProduct:( params ) => dispatch( getProduct(params) ),
    tenantBind: json => dispatch(tenantBind(json))
})

export default createForm()(connect( mapStateToProps,mapDispatchToProps )( Bind ))